<template>
  <view   v-show="payIndex === 0">
  <!-- tab标签栏 -->
  <!-- 销售数据模块 -->
  <view class="bosom">
    <view class="row">
      <view class="vendition">销售数据</view>
      <view>
        <poput-time :list='insuranceData' :default="insuranceIndex" @cancel="bindPickerChangeInsurance"/>
      </view>
    </view>
    <view class="block-box-i block-box-i-active">
      <view class="title">销售总额</view>
      <view class="num">¥{{saleData.saleTotalMoney}}</view>
    </view>
    <view class="box-list align-flex">
      <view class="block-box-i">
        <view class="title">首签金额</view>
        <view class="num">¥{{saleData.firstAmount}}</view>
      </view>
      <view class="block-box-i block-box-i-left">
        <view class="title">续签金额</view>
        <view class="num">¥{{saleData.renewalAmount}}</view>
      </view>
    </view>
    <view class="box-list align-flex">
      <view class="block-box-i">
        <view class="title">开户金额</view>
        <view class="num">¥{{saleData.openAccountAmount}}</view>
      </view>
      <view class="block-box-i block-box-i-left">
        <view class="title">销售笔数</view>
        <view class="num">{{ saleData.salesNumber }}</view>
      </view>
    </view>
  </view>
  <!-- 运营数据模块 -->
  <view class="bosom">
    <view class="row">
      <view class="vendition">运营数据</view>
      <view>
        <poput-time :list='operateData' :default="operateIndex" @cancel="bindPickerChangeOperate" noCustom="true"/>
      </view>
    </view>
    <view class="block-box-i block-box-i-active">
      <view class="title">开通客户</view>
      <view class="num">{{ operatesData?.operationalData?.openCustomer }}</view>
    </view>
    <view class="box-list align-flex">
      <view class="block-box-i">
        <view class="title">发薪笔数</view>
        <view class="num">{{ operatesData?.operationalData?.payNum }}</view>
      </view>
      <view class="block-box-i block-box-i-left">
        <view class="title">发薪金额</view>
        <view class="num">¥{{operatesData?.operationalData?.payMoneyCount}}</view>
      </view>
    </view>
    <view class="box-list align-flex">
      <view class="block-box-i">
        <view class="title">已领薪人数</view>
        <view class="num">{{operatesData?.operationalData?.paidCount}}</view>
      </view>
      <view class="block-box-i block-box-i-left">
        <view class="title">已领薪金额</view>
        <view class="num">¥{{operatesData?.operationalData?.paidMoney}}</view>
      </view>
    </view>
    <view class="circulate">项目统计</view>
    <view class="box-list align-flex">
      <view class="block-box-i">
        <view class="title">需打卡项目</view>
        <view class="num">{{ operatesData?.projectCount?.longTimeProjectCount }}</view>
      </view>
      <view class="block-box-i block-box-i-left">
        <view class="title">快速发薪项目</view>
        <view class="num">{{ operatesData?.projectCount?.quickProjectCount}}</view>
      </view>
    </view>
    <view class="box-list align-flex">
      <view class="block-box-i">
        <view class="title">无打卡项目</view>
        <view class="num">{{ operatesData?.projectCount?.dailyProjectCount }}</view>
      </view>
      <view class="block-box-i block-box-i-left">
        <view class="title">PC发薪项目</view>
        <view class="num">{{ operatesData?.projectCount?.pcProjectCount}}</view>
      </view>
    </view>
  </view>
  <!-- 近7日销售趋势图表模块 -->
  <view class="bosom">
    <view class="row">
      <view class="vendition">近7日销售趋势</view>
      <view class="jamb align-flex">
<!--        <view :class="['sum', numMoney == 0? 'amount-active' : '']" @click="numMoneyChange(0)">按笔数</view>-->
<!--        <view :class="['amount', numMoney == 1? 'amount-active' : '']" @click="numMoneyChange(1)">按金额</view>-->
        <tab-capsule :list="['按笔数','按金额']" :active="numMoney" @change="numMoneyChange"></tab-capsule>
      </view>
    </view>
    <view class="charts-box" v-if="numMoney == 0">
      <qiun-data-charts
        canvas2d
        canvasId="operate-ring"
        type="column"
        :opts="opts"
        :chartData="chartData"
      />
    </view>
    <view class="charts-box" v-if="numMoney == 1">
      <qiun-data-charts
        canvas2d
        canvasId="operate-ringTwo"
        type="column"
        :opts="optsTwo"
        :chartData="chartDataTwo"
      />
    </view>
  </view>
  <!-- 近7日开通趋势图表模块 -->
  <view class="bosom">
    <view class="row">
      <view class="vendition">近7日开通趋势</view>
      <view class="jamb align-flex">
        <view class="graphic"></view>
        <view class="dredge">开通数</view>
      </view>
    </view>
    <view class="charts-box">
      <qiun-data-charts
        canvas2d
        canvasId="operate-ringThree"
        type="column"
        :opts="optsThree"
        :chartData="chartDataThree"
      />
    </view>
  </view>
  <!-- 饼图模块 -->
  <view class="bosom">
    <view class="row">
      <view class="vendition">发薪方式统计</view>

        <picker mode="date" fields="month" :value="date" @change="bindDateChange">
          <view class="screen-i">
          {{ date }}
          <image
            class="drop-down"
            src="@/static/drop-down.png"
            mode="scaleToFill"
          />
          </view>
        </picker>
    </view>
    <view class="jamb interval align-flex">
<!--      <view :class="['sum', numMoneyPie == 0? 'amount-active' : '']"  @click="numMoneyChangePie(0)">按笔数</view>-->
<!--      <view :class="['amount', numMoneyPie == 1? 'amount-active' : '']"  @click="numMoneyChangePie(1)">按金额</view>-->
      <tab-capsule :list="['按笔数','按金额']" :active="numMoneyPie" @change="numMoneyChangePie"></tab-capsule>
    </view>
    <view  v-if="numMoneyPie == 0">
    <view class="operate-chart">
      <qiun-data-charts
        canvas2d
        canvasId="operate-ringFour"
        class="qiun-data-charts"
        type="ring"
        :opts="optsRing"
        :chartData="chartsDataPie1"
      />
    </view>
    <view class="operate-table">
      <view class="table-title row">
        <view class="title">发薪类别</view>
        <view class="title">笔数</view>
        <view class="title">占比</view>
      </view>
      <view class="table-cell row" v-for="(item, index) in methodStatisticsData" :key="index">
        <view class="cell cell-active">
          <view class="colour-block" :style="{background:item.color}"></view>
          {{item.class}}
        </view>
        <view class="cell">{{item.count}}笔</view>
        <view class="cell">{{ (item.count/item.total).toString() == 'NaN' ? 0 : (item.count/item.total * 100).toFixed(2)}}%</view>
      </view>
    </view>
    </view>
    <view v-if="numMoneyPie == 1">
    <view class="operate-chart">
      <qiun-data-charts
        canvas2d
        canvasId="operate-ringFive"
        class="qiun-data-charts-Two"
        type="ring"
        :opts="optsRingTwo"
        :chartData="chartsDataPieTwo"
      />
    </view>
    <view class="operate-table">
      <view class="table-title row">
        <view class="title">发薪类别</view>
        <view class="title">金额</view>
        <view class="title">占比</view>
      </view>
      <view class="table-cell row" v-for="(item, index) in methodStatisticsAmount" :key="index">
        <view class="cell cell-active">
          <view class="colour-block" :style="{background:item.color}"></view>
          {{item.class}}
        </view>
        <view class="cell">{{item.count}}元</view>
        <view class="cell">{{ (item.count/item.total).toString() == 'NaN' ? 0 : (item.count/item.total * 100).toFixed(2)}}%</view>
      </view>
    </view>
    </view>
  </view>
  </view>
</template>

<script lang="ts" setup>
import uchartsOpts from '@/utils/ucharts'
import { ref, defineProps, toRefs, onBeforeUpdate, onMounted, nextTick } from 'vue'

import poputTime from '@/components/popup-custom-time/popup-custom-time.vue'
import { dateFormat } from '@/utils/util'
import dayjs from 'dayjs'
import { onLoad } from '@dcloudio/uni-app'
import user from '@/utils/user'
import {
    getAchievementData,
    getAchievementMethodStatistics, getAchievementMethodStatisticsAmount,
    getLongOpenTrend,
    getProjectStatistics,
    getSenvenTrend
} from '@/api/quick'
import { number } from '@intlify/core-base'
import {
  chartDataFun,
  chartDatas,
  chartDatasThree,
  chartDatasTwo,
  chartsDataPies,
  chartsDataPiesTwo,
  opt
} from '@/utils/uchartsTwo'

onMounted(async () => {
    const nowyear = new Date().getFullYear()
    const nowmonth = new Date().getMonth() + 1
    startTime.value = formatDate(new Date(nowyear, nowmonth - 1, 1))
    endTime.value = formatDate(new Date(nowyear, nowmonth, 0))
    await projectStatistics()
})
// 第一个柱状图
const chartData = ref(chartDatas)
// eslint-disable-next-line no-undef
const opts = ref(opt)

// 第二个柱状图
/* ucharts柱状图操作图表 */
const chartDataTwo = ref(chartDatasTwo)
const optsTwo = ref(opt)
const chartsDataColumn1 = ref({})

// 第三个柱状图
/* ucharts柱状图操作图表 */
const chartDataThree = ref(chartDatasThree)
const optsThree = ref(opt)
// 返回月份时间
const monthTime = dateFormat('YYYY-mm', new Date())
console.log(monthTime, '月份月份')

// import dayjs from 'dayjs' // ES 2015

const cccc = dayjs().format('YYYY-mm', new Date())
console.log(cccc, 'cccc')

const props = defineProps({
    // 子组件接收父组件传递过来的值
    payIndex: Number
})
// 使用父组件传递过来的值
const { payIndex } = toRefs(props)
//
console.log(payIndex.value, '打印一下这个是啥')

onLoad(async () => {
    await user.waitLogin()
    const nowyear = new Date().getFullYear()
    const nowmonth = new Date().getMonth() + 1
    startTime.value = formatDate(new Date(nowyear, nowmonth - 1, 1))
    endTime.value = formatDate(new Date(nowyear, nowmonth, 0))
    await achievementData()
    await senvenTrend()
    await achievementMethodStatistics()
    await longOpenTrend()
    await achievementMethodStatisticsAmount()
})
const formatDate = (date: any) => {
    const myyear = date.getFullYear()
    let mymonth = date.getMonth() + 1
    let myweekday = date.getDate()
    if (mymonth < 10) {
        mymonth = "0" + mymonth
    }
    if (myweekday < 10) {
        myweekday = "0" + myweekday
    }
    return (myyear + "-" + mymonth + "-" + myweekday)
}
// setTimeout(async () => {
// }, 200)
const saleData = ref({})
const startTime = ref('')
const endTime = ref('')
// 调用销售数据接口
const achievementData = async () => {
    const result = await getAchievementData({
    // eslint-disable-next-line eqeqeq
    // queryTime: insuranceIndex.value == 1000 ? '' : insuranceIndex.value,
        startTime: insuranceIndex.value === 1000 ? insuranceFour.value : startTime.value,
        endTime: insuranceIndex.value === 1000 ? insuranceThree.value : endTime.value
    })
    console.log(result, '销售数据')
    saleData.value = result
    console.log(saleData.value, '销售数据')
}

const operatesData = ref({})
// 调用运营数据接口
const projectStatistics = async () => {
    const result = await getProjectStatistics({
        startTime: startTime.value,
        endTime: endTime.value
    })
    console.log(result, '运营数据')
    operatesData.value = result
}

// 调用近7日趋势接口
  const senvenTrend = async () => {
    const result = await getSenvenTrend()
    console.log(result, '近7日趋势')
    console.log(chartData.value.categories, '值是多少')
    chartData.value.categories = result.day.map((item: string, index:number) => {
      console.log(item.split('-')[1] + '/' + item.split('-')[2], 'itemitemitem')
      // index = item.value
      return item.split('-')[1] + '/' + item.split('-')[2]
    })

    chartData.value.series[0].data = result.payQuantity.map((item: string, index:number) => {
      console.log(item, 'moneymoney')
      // index = item.value
      return { value: item, color: '#3E5FF5' }
    })
    // eslint-disable-next-line no-undef
    // chartDataFun(chartData.value.categories, chartData.value.series[0].data, result.day, result.payQuantity)

    chartDataTwo.value.categories = result.day.map((item: string, index:number) => {
      console.log(item.split('-')[1] + '/' + item.split('-')[2], 'itemitemitem')
      // index = item.value
      return item.split('-')[1] + '/' + item.split('-')[2]
    })

    chartDataTwo.value.series[0].data = result.moneyQuantity.map((item: string, index:number) => {
      console.log(item, 'moneymoney')
      // index = item.value
      return { value: item, color: '#3E5FF5' }
    })
  }

const longOpenTrend = async () => {
    const result = await getLongOpenTrend()
    console.log(result, '近7日开通趋势')
    chartDataThree.value.categories = result.day.map((item: string, index:number) => {
        console.log(item.split('-')[1] + '/' + item.split('-')[2], 'itemitemitem')
        // index = item.value
        return item.split('-')[1] + '/' + item.split('-')[2]
    })
    chartDataThree.value.series[0].data = result.openQuantity.map((item: string, index:number) => {
        console.log(item, 'moneymoney')
        // index = item.value
        return { value: item, color: '#3E5FF5' }
    })
}

const methodStatisticsData = ref({})
// 调用发薪方式统计(按笔数)接口
const achievementMethodStatistics = async () => {
    const result = await getAchievementMethodStatistics({
        queryMonth: dateTwo.value
    })
    console.log(result, '发薪方式统计按笔数')
    methodStatisticsData.value = result
    chartsDataPie1.value.series[0].data = result.map((item: any) => {
        return {
            name: item.class,
            value: item.count,
            labelShow: false,
            labelText: false
        }
    })
}

const methodStatisticsAmount = ref({})
// 调用发薪方式统计(按金额)接口
const achievementMethodStatisticsAmount = async () => {
    const result = await getAchievementMethodStatisticsAmount({
        queryMonth: dateTwo.value
    })
    console.log(result, '发薪方式统计按金额')
    methodStatisticsAmount.value = result
    chartsDataPieTwo.value.series[0].data = result.map((item: any) => {
        return {
            name: item.class,
            value: item.count,
            labelShow: false,
            labelText: false
        }
    })
}

// 到达底部
const getmore = () => {
    // if (!hasNextPage.value) {
    //   return
    // }
    // pageNum.value += 1
    // insuranceDetail()
}

/* 饼图数据模块 */
const chartsDataPie1 = ref(chartsDataPies)
const optsRing = ref(uchartsOpts.optsRing)

/* 饼图数据模块 */
const chartsDataPieTwo = ref(chartsDataPiesTwo)

const optsRingTwo = ref(uchartsOpts.optsRing)

// 销售数据  昨天、明天、本周、本月、自定义
const insuranceIndex = ref(3)
const insuranceData = ref(['昨天', '今天', '本周', '本月', '上月'])
const insuranceThree = ref('')
const insuranceFour = ref('')
const insurance = ref('' as string | undefined)
const bindPickerChangeInsurance = async (data:any) => {
    console.log(data, 'operateData')
    insuranceIndex.value = data.index
    insurance.value = data.time
    insuranceFour.value = insurance.value.substring(0, 10)
    insuranceThree.value = insurance.value.substring(13, 23)
    startTime.value = data.startTime
    endTime.value = data.endTime
    console.log(insuranceFour.value, '日期格式日期格式')
    console.log(insuranceThree.value, '日期格式日期格式33333')
    await achievementData()
}

// 运营数据  昨天、明天、本周、本月、自定义
const itemRange = ref('' as string | undefined)
const operateIndex = ref(4)
const operateData = ref(['全部', '昨天', '今天', '本周', '本月', '上月'])
const itemRangeThree = ref()
const itemRangeFour = ref()
const bindPickerChangeOperate = async (
    index: number,
    time: undefined | string
) => {
    console.log(index, 'operateData')
    //   console.log(e.detail, 'e.detail')
    operateIndex.value = index.index
    itemRange.value = index.time
    itemRangeThree.value = itemRange.value.substring(0, 10)
    itemRangeFour.value = itemRange.value.substring(13, 23)
    startTime.value = index.startTime
    endTime.value = index.endTime
    await projectStatistics()
}

const date = ref(monthTime)
const dateTwo = ref(monthTime)
const bindDateChange = function (e: any) {
    console.log(e.target.value, '11111111111112')
    const time = e.target.value.substring(0, 4) + '年' + e.target.value.substring(5, 8) + '月'
    console.log(time, 'yearyearyearyear')
    date.value = time
    console.log(e.target.value, '1111111111111')
    console.log(date, 'datedate')
    dateTwo.value = e.target.value
    // MethodStatistics()
    // if (numMoneyPie.value === 0) {
    achievementMethodStatistics()
    // } else {
    achievementMethodStatisticsAmount()
    // }
}

// 切换人数和金额事件
const numMoney = ref(0)
const numMoneyChange = (val:number) => {
    console.log(val, 'val的之')
    numMoney.value = val
}

// 切换笔数和金额事件
const numMoneyPie = ref(0)
const numMoneyChangePie = (val:number) => {
    console.log(val, 'val的之')
    numMoneyPie.value = val
}

// 切换人数和金额事件
const numMoneyWay = ref(0)
const numMoneyChangeWay = (val:number) => {
    console.log(val, 'val的之')
    numMoney.value = val
}

// watchEffect(() => {
//  console.log(numMoneyWay, 'watchEffect监听')
// })
</script>
<style lang="scss" scoped>
.vendition, .bosom .circulate {
  // font-weight: bold;
}

.bosom .jamb .amount {
  background: #FFFFFF;
  color: black;
}
.bosom .jamb .amount-active{
  background: #EBEFFE;
  color: #3E5FF5;
}

.bosom .jamb .sum{
  border-radius: 12rpx 0 0 12rpx;
}

.bosom .jamb .amount{
  border-radius:  0 12rpx 12rpx 0;
}
.charts-box{
  background-color: #fcfcfc;
  margin-top: 30rpx;
}
</style>
